<template>
  <div class="page-container">
    <!-- 动画元素 -->
    <div class="sun"></div>
    <div class="kite-scene">
      <div class="child">
        <div class="head"></div>
        <div class="body"></div>
        <div class="arms"></div>
        <div class="legs"></div>
      </div>
      <div class="kite">
        <div class="kite-body"></div>
        <div class="kite-tail"></div>
        <div class="kite-string"></div>
      </div>
    </div>
    <div class="birds">
      <div class="bird bird-large">
        <div class="beak"></div>
        <div class="wing-left"></div>
        <div class="wing-right"></div>
        <div class="tail"></div>
      </div>
      <div class="bird bird-medium">
        <div class="beak"></div>
        <div class="wing-left"></div>
        <div class="wing-right"></div>
        <div class="tail"></div>
      </div>
      <div class="bird bird-small">
        <div class="beak"></div>
        <div class="wing-left"></div>
        <div class="wing-right"></div>
        <div class="tail"></div>
      </div>
    </div>
    
    <transition
      appear
      enter-active-class="custom-bounce-down"
    >
      <div class="register-container">
        <h2>注册</h2>
        <form @submit.prevent="handleRegister" class="register-form">
          <div class="form-group">
            <label for="inviteCode">邀请码</label>
            <div class="input-wrapper">
              <input
                type="text"
                id="inviteCode"
                v-model="formData.inviteCode"
                required
                placeholder="请输入邀请码"
              />
              <span v-if="formData.inviteCode" class="clear-btn" @click="formData.inviteCode = ''">×</span>
            </div>
          </div>

          <div class="form-group">
            <label for="username">用户名</label>
            <div class="input-wrapper">
              <input
                type="text"
                id="username"
                v-model="formData.username"
                required
                placeholder="请输入用户名"
              />
              <span v-if="formData.username" class="clear-btn" @click="formData.username = ''">×</span>
            </div>
          </div>

          <div class="form-group">
            <label for="email">邮箱</label>
            <div class="input-wrapper">
              <input
                type="email"
                id="email"
                v-model="formData.email"
                required
                placeholder="请输入邮箱"
              />
              <span v-if="formData.email" class="clear-btn" @click="formData.email = ''">×</span>
            </div>
          </div>

          <div class="form-group">
            <label for="password">密码</label>
            <div class="input-wrapper">
              <input
                :type="showPassword ? 'text' : 'password'"
                id="password"
                v-model="formData.password"
                required
                placeholder="请输入密码"
              />
              <span v-if="formData.password" class="clear-btn" @click="formData.password = ''">×</span>
              <span 
                v-if="formData.password" 
                class="eye-btn" 
                @click="showPassword = !showPassword"
              >
                👁
              </span>
            </div>
          </div>

          <div class="form-group">
            <label for="confirmPassword">确认密码</label>
            <div class="input-wrapper">
              <input
                :type="showConfirmPassword ? 'text' : 'password'"
                id="confirmPassword"
                v-model="formData.confirmPassword"
                required
                placeholder="请再次输入密码"
              />
              <span v-if="formData.confirmPassword" class="clear-btn" @click="formData.confirmPassword = ''">×</span>
              <span 
                v-if="formData.confirmPassword" 
                class="eye-btn" 
                @click="showConfirmPassword = !showConfirmPassword"
              >
                👁
              </span>
            </div>
          </div>

          <div class="form-group">
            <label for="role">角色</label>
            <div class="input-wrapper">
              <select
                id="role"
                v-model="formData.role"
                required
                class="role-select"
              >
                <option value="" disabled>请选择角色</option>
                <option value="false">普通用户</option>
                <option value="true">超级用户</option>
              </select>
            </div>
          </div>

          <button type="submit" class="register-btn">
            <span v-if="!isLoading">立即注册</span>
            <span v-else class="loading-spinner"></span>
          </button>
          <div class="login-link">
            已有账号？<router-link to="/">立即登录</router-link>
          </div>
        </form>
      </div>
    </transition>
    <!-- Toast 组件 -->
    <div class="toast" v-if="toast.show" :class="toast.type">
      {{ toast.message }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      formData: {
        inviteCode: '',
        username: '',
        email: '',
        password: '',
        confirmPassword: '',
        role: 'false'
      },
      showPassword: false,
      showConfirmPassword: false,
      isLoading: false,
      toast: {
        show: false,
        message: '',
        type: 'success',
        timer: null
      }
    }
  },
  methods: {
    showToast(message, type = 'success') {
      // 清除之前的定时器
      if (this.toast.timer) {
        clearTimeout(this.toast.timer)
      }
      
      // 显示新的 toast
      this.toast.show = true
      this.toast.message = message
      this.toast.type = type
      
      // 3秒后自动关闭
      this.toast.timer = setTimeout(() => {
        this.toast.show = false
      }, 3000)
    },
    async handleRegister() {
      if (this.formData.password !== this.formData.confirmPassword) {
        this.showToast('两次输入的密码不一致', 'error')
        return
      }
      
      this.isLoading = true
      try {
        // 准备注册请求参数
        const params = {
          invite_code: this.formData.inviteCode.trim(),
          username: this.formData.username.trim(),
          email: this.formData.email.trim(),
          password: this.formData.password.trim(),
          confirm_password: this.formData.confirmPassword.trim(),
          is_superuser: this.formData.role
        }
        
        // 发送注册请求
        const response = await this.$axios.post('/api/register/', params)
        
        // 处理响应
        if (response.data.code === 200) {
          this.showToast(response.data.msg || '注册成功！', 'success')
          // 延迟跳转到登录页面
          setTimeout(() => {
            this.$router.push('/')
          }, 1500)
        } else {
          this.showToast(response.data.msg || '注册失败', 'error')
        }
      } catch (error) {
        console.error('注册错误：', error)
      } finally {
        // 确保无论成功还是失败，loading 状态都会被重置
        this.isLoading = false
      }
    }
  }
}
</script>

<style scoped>
.page-container {
  position: relative;
  width: 100%;
  height: 100vh;
  background: linear-gradient(180deg, #E0FFFF 0%, #FFFFFF 100%);
  overflow: hidden;
}

/* 太阳 */
.sun {
  position: absolute;
  top: 40px;
  right: 60px;
  width: 60px;
  height: 60px;
  background: #FFD700;
  border-radius: 50%;
  box-shadow: 0 0 30px rgba(255, 215, 0, 0.4);
  animation: sunGlow 3s ease-in-out infinite alternate;
}

/* 放风筝的场景 */
.kite-scene {
  position: absolute;
  right: 15%;
  bottom: 15%;
  z-index: 1;
  height: 300px;
  width: 200px;
}

/* 小孩 */
.child {
  position: absolute;
  bottom: 0;
  right: 20px;
  width: 40px;
  height: 80px;
  z-index: 2;
}

.child .head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  background: #333;
  border-radius: 50%;
  z-index: 3;
}

.child .body {
  position: absolute;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 25px;
  background: #FF6B6B;
  border-radius: 8px 8px 0 0;
  z-index: 2;
}

.child .arms {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 20px;
  z-index: 1;
}

.child .arms::before,
.child .arms::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 16px;
  background: #333;
  border-radius: 6px;
}

.child .arms::before {
  left: 0;
  transform: rotate(-25deg);
}

.child .arms::after {
  right: -4px;
  top: 2px;
  transform: rotate(85deg);
  transform-origin: right center;
}

.child .legs {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 24px;
  height: 30px;
  z-index: 1;
}

.child .legs::before,
.child .legs::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 25px;
  background: #4A90E2;
  border-radius: 4px;
}

.child .legs::before {
  left: 2px;
}

.child .legs::after {
  right: 2px;
}

/* 风筝 */
.kite {
  position: absolute;
  top: 0;
  right: 80px;
  animation: kiteFloat 4s ease-in-out infinite;
}

.kite-body {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #FF6B6B 50%, #4ECDC4 50%);
  transform: rotate(45deg);
  position: relative;
}

.kite-tail {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 20px;
}

.kite-tail::before,
.kite-tail::after {
  content: '';
  position: absolute;
  width: 4px;
  height: 15px;
  background: #FF6B6B;
}

.kite-tail::before {
  left: 0;
  transform: rotate(-15deg);
}

.kite-tail::after {
  right: 0;
  transform: rotate(15deg);
}

.kite-string {
  position: absolute;
  top: 100%;
  left: 50%;
  width: 2px;
  height: 200px;
  background: #333;
  transform-origin: top;
  transform: rotate(-15deg);
}

/* 小鸟 */
.birds {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.bird {
  position: absolute;
  cursor: default;
}

.bird-large {
  width: 30px;
  height: 22px;
  top: 35%;
  left: -40px;
  animation: birdFly1 28s linear infinite;
}

.bird-medium {
  width: 24px;
  height: 18px;
  top: 45%;
  left: -30px;
  animation: birdFly2 25s linear infinite;
}

.bird-small {
  width: 20px;
  height: 15px;
  top: 30%;
  left: -25px;
  animation: birdFly3 22s linear infinite;
}

/* 鸟的身体 */
.bird::before {
  content: '';
  position: absolute;
  width: 50%;
  height: 50%;
  background: #4a4a4a;
  border-radius: 50% 50% 25% 25%;
  top: 0;
  left: 25%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 鸟的头和嘴 */
.bird::after {
  content: '';
  position: absolute;
  width: 40%;
  height: 40%;
  background: #4a4a4a;
  border-radius: 50%;
  top: -10%;
  right: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 鸟的嘴巴 */
.bird .beak {
  position: absolute;
  width: 20%;
  height: 15%;
  background: #e0a83c;
  top: 15%;
  right: -15%;
  border-radius: 2px;
  transform: rotate(15deg);
}

/* 鸟的翅膀 */
.bird .wing-left,
.bird .wing-right {
  position: absolute;
  width: 40%;
  height: 30%;
  background: #4a4a4a;
  top: 30%;
  border-radius: 60% 60% 0 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.bird .wing-left {
  left: 15%;
  transform-origin: right top;
  animation: wingFlapLeft 0.3s ease-in-out infinite alternate;
}

.bird .wing-right {
  right: 15%;
  transform-origin: left top;
  animation: wingFlapRight 0.3s ease-in-out infinite alternate;
}

/* 鸟的尾巴 */
.bird .tail {
  position: absolute;
  width: 28%;
  height: 35%;
  background: #4a4a4a;
  left: -5%;
  top: 25%;
  transform: rotate(-15deg);
  border-radius: 0 50% 0 50%;
  clip-path: polygon(30% 0, 100% 0, 70% 100%, 0 100%);
}

/* 添加尾羽分层效果 */
.bird .tail::before {
  content: '';
  position: absolute;
  width: 70%;
  height: 50%;
  background: #4a4a4a;
  left: 15%;
  top: 25%;
  border-radius: 0 50% 0 50%;
  transform: rotate(-5deg);
}

.bird .tail::after {
  content: '';
  position: absolute;
  width: 60%;
  height: 40%;
  background: #4a4a4a;
  left: 20%;
  top: 40%;
  border-radius: 0 50% 0 50%;
  transform: rotate(-8deg);
}

/* 动画关键帧 */
@keyframes sunGlow {
  0% { transform: scale(1); }
  100% { transform: scale(1.1); }
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes wingFlapLeft {
  0% { transform: rotate(0deg) skewX(0deg); }
  100% { transform: rotate(-35deg) skewX(-10deg); }
}

@keyframes wingFlapRight {
  0% { transform: rotate(0deg) skewX(0deg); }
  100% { transform: rotate(35deg) skewX(10deg); }
}

@keyframes birdFly1 {
  0% { 
    transform: translate(0, 0) rotate(-5deg); 
  }
  15% { 
    transform: translate(calc(15vw), 40px) rotate(5deg); 
  }
  30% { 
    transform: translate(calc(30vw), -20px) rotate(-8deg); 
  }
  45% { 
    transform: translate(calc(45vw), 30px) rotate(3deg); 
  }
  60% { 
    transform: translate(calc(60vw), -10px) rotate(-6deg); 
  }
  75% { 
    transform: translate(calc(75vw), 35px) rotate(8deg); 
  }
  90% { 
    transform: translate(calc(90vw), -15px) rotate(-4deg); 
  }
  100% { 
    transform: translate(calc(100vw + 40px), 20px) rotate(5deg); 
  }
}

@keyframes birdFly2 {
  0% { 
    transform: translate(0, 0) rotate(3deg); 
  }
  20% { 
    transform: translate(calc(20vw), -15px) rotate(-6deg); 
  }
  40% { 
    transform: translate(calc(40vw), 25px) rotate(8deg); 
  }
  60% { 
    transform: translate(calc(60vw), -20px) rotate(-4deg); 
  }
  80% { 
    transform: translate(calc(80vw), 30px) rotate(7deg); 
  }
  100% { 
    transform: translate(calc(100vw + 30px), -10px) rotate(-3deg); 
  }
}

@keyframes birdFly3 {
  0% { 
    transform: translate(0, 0) rotate(-3deg); 
  }
  25% { 
    transform: translate(calc(25vw), 20px) rotate(5deg); 
  }
  50% { 
    transform: translate(calc(50vw), -25px) rotate(-7deg); 
  }
  75% { 
    transform: translate(calc(75vw), 15px) rotate(4deg); 
  }
  100% { 
    transform: translate(calc(100vw + 25px), -5px) rotate(-2deg); 
  }
}

@keyframes kiteFloat {
  0% { 
    transform: translate(-30px, -10px) rotate(-5deg); 
  }
  50% { 
    transform: translate(10px, -20px) rotate(5deg); 
  }
  100% { 
    transform: translate(-30px, -10px) rotate(-5deg); 
  }
}

.register-container {
  width: 357px;
  max-width: 90%;
  padding: 25px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  border: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  z-index: 10;
}

h2 {
  text-align: center;
  color: #333;
  margin-bottom: 20px;
  font-size: 20px;
}

.register-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 15px;
}

label {
  font-size: 12px;
  color: #666;
}

.input-wrapper {
  position: relative;
  width: 100%;
}

.clear-btn {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #999;
  font-size: 18px;
  padding: 0 5px;
}

.eye-btn {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  cursor: pointer;
  color: #666;
  font-size: 16px;
  padding: 0 5px;
}

.clear-btn:hover, .eye-btn:hover {
  color: #333;
}

input {
  padding: 10px 35px 10px 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  width: 100%;
  background-color: white;
}

input:focus {
  outline: none;
  border-color: #4CAF50;
}

input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0 30px white inset !important;
}

.register-btn {
  margin: 0 auto;
  width: 120px;
  background: linear-gradient(45deg, #5FB878, #009688);
  color: white;
  padding: 10px 0;
  border: none;
  border-radius: 25px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s;
  display: flex;
  justify-content: center;
  align-items: center;
}

.register-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.loading-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #ffffff;
  border-top: 2px solid transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

.login-link {
  text-align: center;
  font-size: 13px;
  color: #666;
  margin: 0 15px;
}

.login-link a {
  color: #4CAF50;
  text-decoration: none;
  margin-left: 5px;
}

.login-link a:hover {
  text-decoration: underline;
}

/* Toast 样式 */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: 4px;
  color: white;
  font-size: 14px;
  z-index: 1000;
  animation: slideDown 0.3s ease-out forwards;
}

.toast.success {
  background-color: #4CAF50;
}

.toast.error {
  background-color: #f44336;
}

@keyframes slideDown {
  from {
    transform: translate(-50%, -100%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, 0);
    opacity: 1;
  }
}

.role-select {
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 3px;
  font-size: 13px;
  width: 100%;
  background-color: white;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px;
}

.role-select:focus {
  outline: none;
  border-color: #4CAF50;
}
</style>
